<template>
	<div class="global-config-box">
		<el-collapse v-model="activeNames">
			<el-collapse-item title="全局线条配置" name="1">
				<el-row align="middle">
					<el-col :span="8">宽</el-col>
					<el-col :span="12">
						<el-slider
							:min="1"
							:max="20"
							:step="1"
							v-model="lineAttrs.strokeWidth"
							@change="notifyLineChange('strokeWidth')"
						/>
					</el-col>
					<el-col :span="2" class="public-result">
						{{ lineAttrs.strokeWidth }}
					</el-col>
				</el-row>
				<el-row align="middle">
					<el-col :span="8">颜色</el-col>
					<el-col :span="14">
						<el-input
							type="color"
							v-model.lazy="lineAttrs.stroke"
							@change="notifyLineChange('stroke')"
						/>
					</el-col>
				</el-row>
				<el-row align="middle">
					<el-col :span="8">虚线长度</el-col>
					<el-col :span="14">
						<el-inputNumber
							v-model="lineAttrs.strokeDasharray"
							:step="1"
							:min="0"
							:max="360"
							style="width: 100%"
							controls-position="right"
							@change="notifyLineChange('strokeDasharray')"
						/>
					</el-col>
				</el-row>
				<el-row align="middle">
					<el-col :span="9">启用线条动画</el-col>
					<el-col :span="13">
						<el-switch v-model="enable" @change="setAnimation" />
					</el-col>
				</el-row>
				<el-row align="middle" v-show="enable">
					<el-col :span="8">动画时间</el-col>
					<el-col :span="14">
						<el-inputNumber
							v-model="duration"
							:step="1"
							:min="0"
							:max="360"
							style="width: 100%"
							controls-position="right"
							@change="setAnimation"
						/>
					</el-col>
				</el-row>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script lang="ts">
export default { name: "GlobalConfig" };
</script>
<script lang="ts" setup>
import { reactive, ref } from "@vue/runtime-core";
import { FlowGraph } from "@/views/FlowGraph/graph";
import type { CellView } from "@antv/x6";

interface LineConfig {
	strokeWidth: number;
	stroke: string;
	strokeDasharray: number;
	"style/animation"?: string;
}

const { graph } = FlowGraph;

const activeNames = reactive(["1", "2"]);
// 线条属性
const lineAttrs = reactive<LineConfig>({
	strokeWidth: 1,
	stroke: "#000",
	strokeDasharray: 0
});

const duration = ref(0);
const enable = ref(false);

const setAnimation = () => {
	if (duration.value) {
		notifyLineChange(
			"style/animation",
			enable.value ? `public-line ${duration.value}s infinite linear` : null
		);
	}
};

const notifyLineChange = (attr: keyof LineConfig, value?: string | null) => {
	const views = graph.getMountedViews() as Array<CellView>;
	views.forEach((view) => {
		if (view.isEdgeView?.()) {
			view.cell.attr(`line/${attr}`, value || lineAttrs[attr]);
		}
	});
};
</script>

<style lang="scss" scoped>
.global-config-box {
	:deep(.el-row:nth-of-type(n + 3)) {
		margin-top: 8px;
	}
}
</style>
